<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Embed draw.io Diagram</title>
<script type="text/javascript">
	// To Avoid NPE in connectUtils
	urlParams = {};
</script>
<script src="../new_common/cac.js" type="text/javascript"></script>
<script src="../onedrive_common/ac.js" type="text/javascript"></script>
<script src="/js/viewer.min.js" type="text/javascript"></script>
<script src="../onedrive_common/editor.js" type="text/javascript"></script>
<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.9.12/css/aui.min.css" media="all">
<style type="text/css">
body {
	font-family:Arial, sans-serif;
	overflow:hidden;
	height:100%;
	width:100%;
	margin:0;
	background-color: white;
}

#errorMsg {
  position:absolute;
  bottom:10px;
  left:0px;
  right:0px;
  text-align:center;
  overflow:hidden;
  color:red;
  opacity: 0;
  transition: opacity 1s; 
}

#errorMsg.fade {
  opacity: 1;
}
</style>
</head>
<body>
 <div style="position:absolute;bottom:0;right:0;top:0;left:0;display:inline-block;">
	<table style="height:100%;width:100%">
   		<tr>
   			<td style="height:100%;width:350px;">		    
		        <div style="height:100%;width:350px;border-right:1px solid #cccccc;">
					<form class="aui top-label" action="#" style="height:100%;top:0px;">
						<div class="field-group" style="padding-left:15px;">
							<label for="filenameOD">File name</label> 
							<input class="text macro-param-input" type="text" id="filenameOD" name="filename" disabled placeholder="Choose a file...">
							<button class="aui-button aui-button-primary ap-dialog-submit" id="filePickerOD" disabled>Choose</button>
							<div id="spinner-containerOD"></div>
							<div class="description">OneDrive file name</div>
							<div class="error" id="filenameErrorOD"></div>
						</div>
						<div style="display: none">
							<div class="field-group" style="padding-left:15px;">
								<label for="widthOD">Width</label> <input class="text medium-field" id="widthOD" value="800">
								<div class="description">Width of the viewer (px)</div>
								<div class="error" id="widthErrorOD"></div>
							</div>
							<div class="field-group" style="padding-left:15px;">
								<label for="heightOD">Height</label> <input class="text medium-field" id="heightOD" value="600">
								<div class="description">Height of the viewer (px)</div>
								<div class="error" id="heightErrorOD"></div>
							</div>
							<div class="field-group" style="padding-left:15px;">
								<input class="checkbox small-field" id="autoSizeOD" type="checkbox" >
								<label for="autoSizeOD" style="display:inline-block;font-size:12px">Automatically set the size of the viewer</label>
							</div>
							<div class="field-group" style="padding-left:15px">
								<label for="thumbImgOD">Thumbnail</label>
								<div class="thumbnail">
									<img class="thumbImg" id="thumbImgOD">
								</div>
							</div>
							<div class="field-group" style="padding-left:15px">
								<input type="checkbox" class="checkbox small-fiel" id="useDrawioOD">
								<label for="useDrawioOD" style="display:inline-block;">Preview in draw.io</label>
							</div>
						</div>
						<a id="signoutOD" style="position: absolute;bottom: 2px;right: 5px;font-size: 11px;cursor: pointer;" onclick="javascript:void(0);">Sign Out</a>
					</form>
				</div>
			</td>
   			<td style="text-align: center; height:100%;width:calc(100% - 365px)">
				<div id="previewOD" style="text-align: center; height:100%;width:100%;position:relative;">
					<a style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer"
						onclick="document.getElementById('filePickerOD').click();">Choose a file...</a>
				</div>
			</td>
 		</tr>
   	</table>
 </div>
 <div id="errorMsg">
 </div>
 <script src="editor.js" type="text/javascript"></script>
</body>
</html>
